<template>
  <div>
    <el-dialog :title="'《' + apiInfo.apiName + '》' + '接口信息修改'" v-model="showDialog" draggable>
      <el-form :model="apiInfo" label-width="120px" :rules="rules" ref="updateApiInfo">
        <el-form-item label="接口名称" prop="apiName">
          <el-input v-model="apiInfo.apiName"></el-input>
        </el-form-item>
        <el-form-item label="接口描述">
          <el-input v-model="apiInfo.apiDesc" type="textarea"/>
        </el-form-item>
        <el-form-item label="请求类型" prop="apiType">
          <el-radio-group v-model="apiInfo.apiType" size="small">
            <el-radio-button label="GET">GET</el-radio-button>
            <el-radio-button label="POST">POST</el-radio-button>
            <el-radio-button label="PUT">PUT</el-radio-button>
            <el-radio-button label="DELETE">DELETE</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="接口地址" prop="apiUri">
          <el-input v-model="apiInfo.apiUri"></el-input>
        </el-form-item>
        <el-form-item label="请求头" prop="apiHeader">
          <el-input v-model="apiInfo.apiHeader" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

    <div style="text-align: left">
      <my-descript :show-str="apiInfo.apiDesc" :write-flag="writeFlag" @update="showDialog = true"/>

      <h3 :id="subMenuId.id_1_1">{{ apiMenuTitle.apiInfo.children.uri }}</h3>
      <el-row align="middle" style="margin: 4px 0;">
        <el-col :span="2">
          <div :class="getClass(apiInfo.apiType)">
            <div class="api-type-out">
              {{ apiInfo.apiType }}
            </div>
          </div>
        </el-col>
        <el-col :span="22">
          <my-code :show-str="apiInfo.apiUri" :write-flag="writeFlag" @update="showDialog = true"/>
        </el-col>
      </el-row>

      <div v-if="apiInfo.apiHeader && apiInfo.apiHeader !== ''">
        <h3 :id="subMenuId.id_1_2">{{ apiMenuTitle.apiInfo.children.header }}</h3>
        <my-code :show-str="apiInfo.apiHeader" write-flag="write-flag" @update="showDialog=true"/>
      </div>
    </div>
    <user-time :param="apiInfo"/>
  </div>
</template>

<script>
import ApiDocConstants from "../../utils/api-utils/ApiDocConstants.js";
import MyDescript from "../../components/util/MyDescript.vue";
import MyCode from "../../components/util/MyCode.vue";
import FormRules from "../../utils/FormRules.js";
import myaxios from "../../plugs/myaxios";
import {ElMessage} from "element-plus";
import UserTime from "../UserTime.vue";

export default {
  name: "ApiInfo",
  components: {UserTime, MyCode, MyDescript},
  props: {
    apiInfo: {
      type: Object,
      default: ApiDocConstants.apiInfo
    },
    writeFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: false,
      apiMenuTitle: ApiDocConstants.apiMenuTitle,
      rules: {
        apiName: FormRules.rules.name,
        apiType: FormRules.rules.apiType,
        apiUri: FormRules.rules.apiUri
      },
      subMenuId: ApiDocConstants.subMenuId
    };
  },
  methods: {
    goToSelection(node) {
      if (!node) {
        return
      }
      const element = document.getElementById(node.id)
      if (element) {
        element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'})
      }
    },
    handleSave() {
      this.$refs.updateApiInfo.validate(valid => {
        if (valid) {
          // 使用axios post请求提交
          myaxios.put("/dist/api/apiInfo", this.apiInfo).then(
              res => {
                // 处理res
                if (res.data.code !== 100) {
                  ElMessage.error(res.data.msg);
                  return;
                }
                ElMessage.success("修改接口信息成功。");
                // 隐藏对话框
                this.showDialog = false;
              },
              err => {
                ElMessage.error("服务器错误，操作失败。");
              }
          );
        }
      });
    },
    getClass(str) {
      if (!str) {
        return 'api-type-default';
      } else if (str === 'GET') {
        return 'api-type-get'
      } else if (str === 'DELETE') {
        return 'api-type-delete'
      } else if (str === 'POST') {
        return 'api-type-post'
      } else if (str === 'PUT') {
        return 'api-type-put'
      } else {
        return 'api-type'
      }
    }
  }
}
</script>

<style scoped>
.api-type-out {
  height: 34px;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  display: flex;
}

.api-type-default {
  background-color: #EEEEEE;
  border-radius: 2px;
  margin-right: 4px;
}

.api-type-get {
  background-color: #49cb8f;
  border-radius: 2px;
  margin-right: 4px;
}

.api-type-delete {
  background-color: #f93e3e;
  border-radius: 2px;
  margin-right: 4px;
}

.api-type-post {
  background-color: #61aefc;
  border-radius: 2px;
  margin-right: 4px;
}

.api-type-put {
  background-color: #fca030;
  border-radius: 2px;
  margin-right: 4px;
}

.api-type {
  background-color: #DDD;
  border-radius: 2px;
  margin-right: 4px;
}
</style>